<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
    crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <title>冰冻大西瓜的博客</title>
</head>

<body>
  <!-- 导航 -->
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
    <div class="container">
      <a href="#" class="navbar-brand">冰冻大西瓜</a>
      <button class="navbar-toggler" type="button" data-bs-toggle='collapse' data-bs-target="#navmenu">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navmenu">
        <ul class="navbar-nav ms-auto ">
          <li class="nav-item">
            <div class="nav-link">前端知识</div>
          </li>
          <li class="nav-item">
            <div class="nav-link">后端知识</div>
          </li>
          <li class="nav-item">
            <div class="nav-link">数据库知识</div>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- 顶部 开启编程之旅 -->
  <!-- text-md-start 当屏幕分辨率大于md(≥768px) 文字左对齐显示 否则居中显示-->
  <section class="p-5 bg-dark text-light text-center text-md-start">
    <div class="container">
      <div class="d-flex">
        <!--display:flex-->
        <div>
          <h1>成为一个<span class="text-warning">前端工程师</span></h1>
          <p class="my-4">
            <!--margin-top margin-botton-->
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut quia eligendi consequatur omnis
            aliquid.
            Voluptates tempora ipsam, debitis nisi in recusandae laborum explicabo quod quidem eaque perspiciatis,
            voluptas aliquid doloremque!
          </p>
          <button class="btn btn-primary btn-lg">开始编程之旅</button>
        </div>
        <img src="./img/showcase.svg" alt="" class="w-50 d-none d-md-block">
      </div>
    </div>
  </section>
  <!-- 中上部 注册账户 -->
  <section class="p-5 bg-primary text-light">
    <div class="container ">
      <div class="d-md-flex justify-content-center align-content-center ">
        <h3 class=" m-0  mx-lg-3 lh-base">注册账号开启学习之旅</h3>
        <div class="input-group new-input">
          <input type="text" class="form-control" placeholder="请输入你的邮箱">
          <button class="btn-dark btn-lg">注册</button>
        </div>
      </div>
    </div>
  </section>
  <!-- 中部 前后数据库知识 -->
  <section class="p-5">
    <div class="container">
      <div class="row g-4">
        <div class="col-md">
          <div class="card bg-dark text-light">
            <div class="card-body text-center">
              <div class="card-title ">
                前端知识
              </div>
              <div class="card-text">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
              </div>
              <a href="#" class="btn btn-primary">学习前端</a>
            </div>
          </div>
        </div>
        <div class="col-md">
          <div class="card bg-secondary text-light">
            <div class="card-body text-center">
              <div class="card-title ">
                后端知识
              </div>
              <div class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. </div>
              <a href="#" class="btn btn-dark">学习前端</a>
            </div>
          </div>
        </div>
        <div class="col-md">
          <div class="card bg-dark text-light">
            <div class="card-body text-center">
              <div class="card-title ">
                数据库知识
              </div>
              <div class="card-text">Esse eum, quo id aliquam fugiat nemo corporis minima iure necessitatibus</div>
              <a href="#" class="btn btn-primary">学习数据库</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- 中下部 -->
  <section class="p-5">
    <div class="container">
      <div class="row align-items-center justify-content-between">
        <div class="col-md"><img src="img/1.svg" alt="1" class="img-fluid"></div>
        <div class="col-md p-5">
          <h2>课程介绍</h2>
          <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam voluptatum provident quis?
            Quaerat, officiis recusandae.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum exercitationem unde, doloribus soluta
            voluptates fugit error minima officiis quidem eaque aperiam illum hic facere suscipit ad doloremque! Culpa,
            officiis illum!</p>
          <a href="#" class="btn btn-light">查看更多</a>
        </div>
      </div>
    </div>
  </section>
  <section class="p-5 bg-dark text-light">
    <div class="container">
      <div class="row align-items-center justify-content-between">
        <div class="col-md p-5">
          <h2>学习React</h2>
          <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam voluptatum provident quis?
            Quaerat, officiis recusandae.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum exercitationem unde, doloribus soluta
            voluptates fugit error minima officiis quidem eaque aperiam illum hic facere suscipit ad doloremque! Culpa,
            officiis illum!</p>
          <a href="#" class="btn btn-light">查看更多</a>
        </div>
        <div class="col-md"><img src="img/2.svg" alt="1" class="img-fluid"></div>
      </div>
    </div>
  </section>
  <!-- 手风琴问答 -->
  <section class="p-5">
    <div class="container">
      <h2 class="text-center">常见问题</h2>
      <div class="accordion accordion-flush" id="accordionFlushExample">
        <div class="accordion-item">
          <h2 class="accordion-header" id="flush-headingOne">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
              Accordion Item #1
            </button>
          </h2>
          <div id="flush-collapseOne" class="accordion-collapse collapse show" aria-labelledby="flush-headingOne"
            data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the
              <code>.accordion-flush</code> class. This is the first item's accordion body.
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header" id="flush-headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
              Accordion Item #2
            </button>
          </h2>
          <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
            data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the
              <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being
              filled with some actual content.
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header" id="flush-headingThree">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
              Accordion Item #3
            </button>
          </h2>
          <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree"
            data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the
              <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting
              happening here in terms of content, but just filling up the space to make it look, at least at first
              glance,
              a bit more representative of how this would look in a real-world application.
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- 讲师介绍 -->
  <section class="bg-primary p-5">
    <div class="container">
      <h2 class="text-center text-light">讲师介绍</h2>
      <p class="lead text-white text-center mb-5">
        Lorem ipsum dolor sit amet consectetur
        adipisicingelit.Velit,dignissimos.</p>
    </div>
    <div class="row g-4 justify-content-evenly ">
      <div class="col-md-6 col-lg-3">
        <div class="card bg-light">
          <div class="card-body text-center">
            <img src="img/01-man.jpeg" alt="" class="mb-3 rounded-circle">
            <div class="card-title fs-3">张三</div>
            <p class="card-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi a consequatur ratione
              quae sunt sed id iusto fuga eligendi placeat.</p>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-3">
        <div class="card bg-light">
          <div class="card-body text-center">
            <img src="img/02-man.jpeg" alt="" class="mb-3 rounded-circle">
            <div class="card-title fs-3">李四</div>
            <p class="card-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi a consequatur ratione
              quae sunt sed id iusto fuga eligendi placeat.</p>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-3">
        <div class="card bg-light">
          <div class="card-body text-center">
            <img src="img/03-man.jpeg" alt="" class="mb-3 rounded-circle">
            <div class="card-title fs-3">王五</div>
            <p class="card-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi a consequatur ratione
              quae sunt sed id iusto fuga eligendi placeat.</p>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-3">
        <div class="card bg-light">
          <div class="card-body text-center">
            <img src="img/04-man.jpeg" alt="" class="mb-3 rounded-circle">
            <div class="card-title fs-3">赵六</div>
            <p class="card-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi a consequatur ratione
              quae sunt sed id iusto fuga eligendi placeat.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- 联系我们 -->
  <section class="p-5">
    <div class="container">
      <h2 class="text-center">联系我们</h2>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">电话:150xxxxxx</li>
        <li class="list-group-item">邮箱:xxxxxx@xxx.com</li>
        <li class="list-group-item">地址:上海闵行区xxxx</li>
      </ul>
    </div>
  </section>
  <footer class="p-5 text-center bg-dark text-light">
    <div class="container">
      <p class="lead">Copyright &copy; 2021 冰冻大西瓜</p>
    </div>
  </footer>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
    crossorigin="anonymous"></script>
</body>

</html>